<template>
  <div class="chart-wrapper">
    <div class="first-box">
      <div class="chart-item">
        <div class="chart-item-item">
          <div class="list">
            <p>本月累计收益（万元）</p>
            <p>
              ￥
              <!-- state.firstList.allAmount -->
              <CountTo
                :startVal="0"
                decimals="2"
                :endVal="state.firstList.allAmount"
                :duration="4000"
              ></CountTo
              >0
            </p>
          </div>

          <div class="top">
            <div class="top-item">
              <span class="s22222"></span>
              <span>今日新增收益</span>
            </div>
            <div class="top-item">
              <p style="font-weight: 700; font-size: 20px">
                <CountTo
                  style="font-weight: 700; font-size: 20px"
                  :startVal="1000"
                  decimals="2"
                  :endVal="state.firstList.tadayAdded"
                  :duration="6000"
                ></CountTo>
              </p>
              <p>万元</p>
            </div>
          </div>
          <div class="top">
            <div class="top-item">
              <span class="s2221"></span>
              <span>今日新增收益</span>
            </div>
            <div class="top-item">
              <p style="font-weight: 700; font-size: 20px">
                <CountTo
                  style="font-weight: 700; font-size: 20px"
                  :startVal="1000"
                  decimals="2"
                  :endVal="state.firstList.tadayAmount"
                  :duration="4000"
                ></CountTo>
              </p>
              <p>万元</p>
            </div>
          </div>
          <div class="top">
            <div class="top-item">
              <span class="ss33"></span>
              <span>今日新增收益</span>
            </div>
            <div class="top-item">
              <p style="font-weight: 700; font-size: 20px">
                <CountTo
                  style="font-weight: 700; font-size: 20px"
                  :startVal="1000"
                  decimals="2"
                  :endVal="state.firstList.tadaySub"
                  :duration="4000"
                ></CountTo>
              </p>
              <p>万元</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <Fechart></Fechart>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="second-box">
      <div class="sec-left">
        <div id="zhu" style="width: 100%; height: 100%"></div>
      </div>
      <div class="sec-right">
        <el-calendar v-model="state.cid" @click="calen()" />
      </div>
    </div>

    <!-- 第三行 -->
    <div class="three-box">
      <div class="left-box">
        <el-card>
          <Techart></Techart>
        </el-card>
        <el-card>
          <Wordechart></Wordechart>
        </el-card>
      </div>
      <el-card>
        <Dtechart></Dtechart>
      </el-card>
    </div>
  </div>

  <div class="last-box">
    <Tableechart></Tableechart>
  </div>
  
</template>

<script setup>
import { ref, toRefs, reactive, onMounted } from "vue";
import { Trend, calList } from "@/http/chart.js";
import { CountTo } from "vue3-count-to";
import * as echarts from "echarts";
import Fechart from "./comecharts/fechart";
import Techart from "./comecharts/techart";
import Dtechart from "./comecharts/dtechart";
import Wordechart from "./comecharts/wordechart";
import Tableechart from "./comecharts/tableechart";

const state = reactive({
  firstList: [],
  option1: null,
  cid: "",
  timeStrlist: [], //时间
  balancelist: [], //结语
  expenselist: [], //实收
  incomelist: [], //收益
});

const value = ref(new Date());
// 点击日历
let calen = () => {
  state.cid = value.value;
  state.timeStrlist = []; //时间
  state.balancelist = []; //结语
  state.expenselist = []; //实收
  state.incomelist = []; //收益
  getCal();
};
//获取日历
let getCal = async () => {
  const res = await calList(state.cid);
  console.log(state.cid, "  state.cid   state.cid   state.cid ");
  console.log(res, "pppppppp");
  res.data.result.forEach((item) => {
    state.timeStrlist.push(item.timeStr);
  });
  res.data.result.forEach((item) => {
    state.balancelist.push(item.balance);
  });
  res.data.result.forEach((item) => {
    state.expenselist.push(item.expense);
  });
  res.data.result.forEach((item) => {
    state.incomelist.push(item.income);
  });
  console.log(state.balancelist, "*/////////////");
  chartOpt();
};
const chartOpt = () => {
  const chartDom1 = document.getElementById("zhu");
  const myChart1 = echarts.init(chartDom1);
  let option1 = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["Profit", "Expenses", "Income"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "value",
      },
    ],
    yAxis: [
      {
        type: "category",
        axisTick: {
          show: false,
        },
        data: [...state.timeStrlist],
      },
    ],
    series: [
      {
        name: "Profit",
        type: "bar",
        label: {
          show: true,
          position: "inside",
        },
        emphasis: {
          focus: "series",
        },
        data: [...state.expenselist],
      },
      {
        name: "Income",
        type: "bar",
        stack: "Total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [...state.incomelist],
      },
      {
        name: "Expenses",
        type: "bar",
        stack: "Total",
        label: {
          show: true,
          position: "left",
        },
        emphasis: {
          focus: "series",
        },
        data: [...state.balancelist],
      },
    ],
  };
  option1 && myChart1.setOption(option1);
};
onMounted(() => {
  listgett();
  getCal();
  setTimeout(() => {
    chartOpt();
  }, 1000);
});
// 获取收入多少
const listgett = async () => {
  const res = await Trend();
  state.firstList = res.data;
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.chart-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .first-box {
    width: 100%;
    height: 280px;
    box-shadow: 1px 0px 2px 2px rgb(0 0 0 / 12%);
    padding: 10px;
    display: flex;
    align-items: center;
    .chart-item {
      width: 25%;
      height: 100%;
      background-color: #ffffff;
      .chart-item-item {
        width: 98%;
        height: 88%;
        background-color: yellow;
        .top {
          width: 100%;
          height: 57px;
          background-color: #ffffff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #c9c9c9;
          .top-item {
            display: flex;
            margin-top: 5px;
            .s2221 {
              border-left: 6px solid #e6a23c;
            }
            span {
              font-size: 12px;
            }
            .ss33 {
              border-left: 6px solid #67c23a;
            }
            .s22222 {
              border-left: 6px solid #409eff;
            }
            span:nth-of-type(2) {
              margin-left: 10px;
            }
            p:nth-of-type(2) {
              margin-top: 7px;
            }
          }
        }
        .list {
          width: 100%;
          height: 30%;
          background-color: #5a6df0;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          color: #fff;
          p:nth-of-type(1) {
            font-size: 12px;
            font-weight: 700;
          }
          p:nth-of-type(2) {
            font-size: 24px;
          }
        }
      }
    }
    .right {
      margin-left: 20px;
      width: 75%;
      height: 100%;
      // background: red;
    }
  }
  .second-box {
    margin-top: 30px;
    width: 100%;
    height: 100%;
    // box-shadow: 1px 0px 2px 2px rgb(0 0 0 / 12%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sec-left {
      width: 65%;
      height: 589px;
      box-shadow: 1px 0px 2px 2px rgb(0 0 0 / 12%);
      padding: 10px;
    }
    .sec-right {
      width: 34%;
      height: 100%;
      box-shadow: 1px 0px 2px 2px rgb(0 0 0 / 12%);
      padding: 10px;
    }
  }
  .three-box {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    // background: #67c23a;
    .left-box {
      .el-card {
        width: 282px;
        height: 240px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px;
      }
    }
    .el-card {
      width: 890px;
      height: 495px;
    }
  }
  .last-box {
    width: 100%;
    height: 100%;
    margin-top: 20px;
  }
}
</style>